// import * as d3 from 'd3'

let dataDemo = {
    head: ["企业名称", "主营业务", "营收（亿元）", "增长", "股票代码"],
    data: [
        ["红星美凯(H)", "家居卖场", "109.6", "16.14", "01528.hk"],
        ["敏华控股", "功能沙发、床垫等", "84.56", "28.89", "01999.hk"],
        ["中国联塑", "家居建材等", "203.6", "18.23", "02128.hk"],
        ["大自然家居", "地板、橱衣柜等", "25.51", "10.15", "02083.hk"],
        ["雷士照明", "灯具、照明产品等", "40.63", "6.75", "02222.hk"],
        ["慕容控股", "软体沙发等", "12", "27.41", "01575.hk"],
        ["皇朝家私", "实木家具、沙发、软床等", "8.49", "16.67", "01198.hk"],
        ["盛诺集团", "慢回弹产品、床垫、记忆枕等", "35.29", "19.53", "01418.hk"],
        ["中创环球", "家居饰品、电壁炉等", "1.48", "57.74", "01678.hk"],
        ["集一家居", "家居装饰材料、家具等", "4.16", "8.65", "01495.hk"],
        ["航标控股", "陶瓷/卫浴产品等", "4.1", "13.83", "01190.hk"]
    ]
};

let option = {
    data: dataDemo, // {}
    Graph: GraphTable
};


let gt = new GraphTable("view1");
gt.draw();

"use strict";
function GraphTable(id){
    const colorLine = '#ccc';
    // 列宽百分比
    const ws = ['0.10', '0.15', '0.30', '0.30', '0.15'];
    let width = $("#" + id).width(), height = $("#" + id).height();
    let PT = 50, PL = 50;
    let count, rowH, W, svg;

    // -------------------------------列标准辅助线-------------------------------
    // svg.append('g').selectAll('line').data(ws.map(function(d, i){ return getLeft(i); }))
    //     .enter().append('line')
    //     .attr('x1', function(d){ return d; })
    //     .attr('x2', function(d){ return d; })
    //     .attr('y1', 50)
    //     .attr('y2', 60)
    //     .style('stroke-width', 1).style('stroke', '#000');

    this.draw = function () {
        init(option.data.data);

        addHeadText(option.data.head);

        addColText([0, 1, 4]);

        addBar(2, [2], ['营收（亿元）'], ['#003366', '#006699'], 0);

        addBar(3, [3], ['增长率'], ['#4cabce', '#e5323e'], 20);
    };

    function range(min, max){
        let ary = [];
        if (max===undefined) {
            max = min;
            min = 0;
        }
        for (let i=min; i<max; i++) ary.push(i);
        return ary;
    }
    function init(data){
        count = data.length;
        rowH = (height - PT) / count;
        W = width - PL; // 实际宽度
        svg = d3.select("#" + id).append('svg').attr('width', width).attr('height', height);
        let line = d3.line();
        svg.append('path').attr('d', line([[PL, PT], [width, PT]]))
            .style('stroke-width', 1).style('stroke', colorLine);
    }
    function getLeft(idx){
        return PL + range(idx).reduce(function (a, b) { return a + W * ws[b]; }, 0);
    }
    function getColX(idx, style){
        if (style===undefined) style = 0;
        let p = [0, 0.5, 1][style];
        return getLeft(idx) + W * ws[idx] * p;
    }

    function addHeadText(cols){
        // 列标题
        svg.append('g').selectAll('text').data(cols).enter().append('text')
            .attr('x', function(d, i){ return getColX(i, 1); })
            .attr('y', PT - 10)
            .attr('text-anchor', 'middle').style('font-size', 15).style('fill', '#000')
            .text(function(d){ return d; });
    }
    function addColText(cols){
        let data = option.data.data;
        cols.forEach((i) => {
            let col = svg.append('g').selectAll('text').data(data).enter().append('text')
                .attr('y', function(d, i){ return PT + (i + 0.5) * rowH; })
                .attr('x', getColX(i, 1))
                .attr('text-anchor', 'middle').style('font-size', 14).style('fill', '#777')
                .text(function(d){ return d[i]; });
        })
    }
    /*
         参数1：放置的列位置
         参数2：目标数据的维度索引(列索引)集合
         参数3：图形的行头文字
         支持单格多条柱子
    */
    function addBar(colIndex, cs, xs, colors, offX){
        let data = option.data.data;
        // 核心柱子值上限
        let maxV1 = data.reduce(function(a, b){
            let m = cs.reduce((a1, c) => parseFloat(b[c]) > a ? b[c] : a, 0);
            return parseFloat(a) > parseFloat(m) ? a : m;
        }, 0);

        const barLeft = 100;
        let x = d3.scaleLinear().domain([0, parseFloat(maxV1)]).range([0, W * ws[colIndex] - 120]);
        cs.map(function(n, idx){
            svg.append('g').selectAll('rect').data(data).enter().append('rect')
                .attr('x', getColX(n, 0) + barLeft)
                .attr('y', function(d, i){ return PT + rowH * i + (rowH / 2) * idx + 5; })
                .attr('width', function(d){ return x(parseFloat(d[n])); })
                .attr('height', rowH / 3)
                .style('fill', colors[idx])
            ;
            svg.append('g').selectAll('text').data(data).enter().append('text')
                .attr('x', function(d){
                    let w = x(parseFloat(d[n]));
                    return getColX(n, 0) + barLeft + 3 + (w > 0 ? w : 0);
                })
                .attr('y', function(d, i){ return PT + rowH * i + (rowH / 2) * idx + 5 + 12; })
                .style('fill', colors[idx])
                .attr('text-anchor', 'left').style('font-size', 12)
                .text( function(d){ return d[n]; })
            ;
            svg.append('g').selectAll('text').data(data).enter().append('text')
                .attr('x', getColX(n, 0) + barLeft - offX)
                .attr('y', function(d, i){ return PT + rowH * i + (rowH / 2) * idx + 5 + 12; })
                .style('fill', colors[idx])
                .attr('text-anchor', 'end').style('font-size', 12)
                .text(xs[idx])
            ;
        });
    }
}
// export const name = 'Gtabel';

